<template>
  <div id="cityList">
    <header>
      <i @click="goBack()"></i>
      <div>选择城市</div>
    </header>
    <!--显示点击的是哪一个字母-->
    <div id="showLetter" class="showLetter"><span>{{letter}}</span></div>
    <div class='search'>
      <input type="text" id="suggestId" size="20" placeholder="请输入城市名" v-model='inputVal' @focus="showSearch = false">
      <span @click="getSearchList">确定</span>
      <span @click="cancel">取消</span>
    </div>
    <ul class="city" v-if='!showSearch'>
      <li v-for="(item,index) in cityList">
        <div>
          <h3 :id="item.name.substring(0,1)">{{item.name}}</h3>
          <ul class="scity">
            <li v-for="(sitem,sindex) in item.cities" @click="selectCity(sitem.name)">
              {{sitem.name}}
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="searchList" v-if='showSearch'>
      <li v-if="searchList.length < 1" style="text-align: center;">
        <a>未查询到该城市！</a>
      </li>
      <li v-for="(item,index) in searchList" @click="selectCity(item)">
        <a>{{item}}</a>
      </li>
    </ul>
    <ul class="right" v-if='!showSearch'>
      <li v-for="(item,index) in cityList" @click="goScroll(item.name.substring(0,1))">
        {{item.name.substring(0,1)}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        inputVal: '',
        cityList: [],
        searchList: [],
        showSearch: false,
        letter: '',
      }
    },
    methods: {
      // 点击右侧字母跳到对应城市
      goScroll(i) {
        this.letter = i;
        $(".city").scrollTop(0);
        const scrollTop = $('#' + i).offset().top - 85;
        $(".city").scrollTop(scrollTop);
        $("#showLetter").show().delay(500).hide(0);
      },
      //返回上一级
      goBack() {
        this.$router.back();
      },
      // 获取城市列表
      getCityList() {
        this.cityList = cityData;
      },
      // 获取搜索列表
      getSearchList() {
        this.showSearch = true;
        const upperCase = this.inputVal.toUpperCase();
        this.searchList = [];
        this.cityList.forEach((item1, index1) => {
          item1.cities.forEach((item2, index2) => {
            if (item2.name.indexOf(this.inputVal) > -1 && item1.name != '★热门城市') {
              this.searchList.push(item2.name);
            } else if (item2.tags.indexOf(upperCase) > -1 && item1.name != '★热门城市') {
              this.searchList.push(item2.name);
            }
          });
        });
      },
      //取消
      cancel() {
        this.showSearch = false;
        this.inputVal = '';
      },
      // 选择后返回上一级
      selectCity(item) {
        if (this.$route.query.user == 'doctor') {
          this.$router.push({
            name: 'selectClinic',
            query: {
              city: item,
              user: 'doctor'
            }
          });
        } else {
          this.$router.push({
            name: 'findDoctor',
            query: {
              city: item
            }
          });
        }
      },
    },
    mounted() {

    },
    created() {
      this.getCityList();
    }
  }

</script>
<style lang="scss" scoped>

</style>
